<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 100px;
    }
    .hours {
      color: red;
    }

    body {
      margin: 0;
    }

    .minutes {
      color: green;
    }

    .seconds {
      color: blue;
    }

    .clock {
      border: 1px dashed black;
      padding: 5px;
      display: inline-block;
      background: yellow;
      position: absolute;
      left: 100px;
      top: 100px;
    }

    #tooltip {
      position: absolute;
      padding: 10px 20px;
      border: 1px solid #b3c9ce;
      border-radius: 4px;
      text-align: center;
      font: italic 14px/1.3 sans-serif;
      color: #333;
      background: #fff;
      z-index: 100000;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
    }

  </style>
</head>
<body>
  <div id="elem" class="clock">
    <span class="hours">12</span> :
    <span class="minutes">30</span> :
    <span class="seconds">00</span>
  </div>

  <script>
    // 一个简单的工具提示
    let tooltip = document.createElement('div');
    tooltip.id = "tooltip";
    tooltip.className = "tooltip";
    tooltip.innerHTML = "Tooltip";

    // 放上和移入事件
    function HoverIntent ({elem, over, out}) {
      let enterTime = 0
      let levaeTime = 0
      let timer = null
      elem.addEventListener('mouseenter', (e) => {
        console.log('mouseenter')
        enterTime = new Date()
        timer = setTimeout(() => {
          console.log('mouseenter 300')
          over()
        }, 300)
      })
      elem.addEventListener('mouseleave', (e) => {
        console.log('mouseout')
        levaeTime = new Date() 
        if (levaeTime - enterTime < 300) {
          clearTimeout(timer)
        } else {
          out()
        }
      })
    }

    // 该对象将跟踪鼠标，并调用 over/out
    new HoverIntent({
      elem,
      over() {
        tooltip.style.left = elem.getBoundingClientRect().left + 'px';
        tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
        document.body.append(tooltip);
      },
      out() {
        tooltip.remove();
      }
    });


  </script>
</body>
</html>